<template>
  <div>
    <return-before title="热听" />
    <!-- 这里是上面的轮播 -->

    <!-- 这里是你之前提供的代码片段 -->
    <div>
      <van-card
        style="font-size: 17px;padding-top:4px; background: white"
        title="人间失格"
        thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2Fb6455df2-eb51-48ec-baf9-74bf774ea394%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690790162&t=14c162748bc130210136fff6ad93bfe7"
        class="zj"
      >
        <template #tags>
          <van-button
            size="mini"
            style="
              border-radius: 10px;
              width: 70px;
              font-size: 13px;
              background: #f3efef;
              margin-right: 6px;
              margin-top: 16px;
            "
            >治愈</van-button
          >
          <van-button
            size="mini"
            style="
              border-radius: 10px;
              width: 70px;
              font-size: 13px;
              background: #f3efef;
              margin-top: 16px;
            "
            >100w</van-button
          >
          <div style="font-size: 14px; margin-top: 14px">我问神灵：难道不反抗也是一种罪过吗？</div>
        </template>
      </van-card>
      <div class="green-div" style="font-size: 13px;">评分4.8</div>
      <div class="background">
        <span class="plus">+</span>
      </div>
    </div>

    <!-- 这里加了一个空的div 是为了消除浮动给下面的元素带来的影响 -->
    <div style="clear: both"></div>
    <!-- 这里是引用的组件 -->
    <!-- <limit-Time /> -->
    <book :items="data0" :title="title[0]" />
    <book :items="data1" :title="title[1]" />
    <book :items="data2" :title="title[2]" />
    <book :items="data3" :title="title[3]" />
  </div>
</template>

<script>
import book from "../../components/listenMusic/book.vue";
import Vue from "vue";
import { getBooksApi } from "../../api/booksApi";
import { Card } from "vant";
Vue.use(Card);
export default {
  components: {
    book,
  },
  data() {
    return {
      data0: [],
      data1: [],
      data2: [],
      data3: [],
      title: ["免费精品", "新书免费", "热门免费", "男生最爱"],
    };
  },
  async created() {
    let book = await getBooksApi();
    this.data0 = book.slice(1, 4);
    this.data1 = book.slice(5, 8);
    this.data2 = book.slice(4, 7);
    this.data3 = book.slice(2, 6);
  },
};
</script>

<style lang="scss" scoped>
.zj {
  float: left;
  width: 300px;
}
.green-div {
  margin-right: 5px;
  float: right;
  background-color: green;
  width: 50px;
  height: 25px;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}
.background {
  margin-top: 38px;
  margin-left: 28px;
  right: 50px;
  float: left;
  background-color: green;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plus {
  color: white;
  font-size: 30px;
}
</style>
